<!--  -->
<template>
  <div style="position: fixed; width: 100%; z-index: 10000">
    <nav>
      <div
        @click="cur == 0 ? (cur = -1) : (cur = 0)"
        :class="{ cur: cur == 0 }"
      >
        {{ title.value }}
        <i v-show="cur == 0" class="iconfont icon-shang"></i>
        <i v-show="cur != 0" class="iconfont icon-xia"></i>
      </div>
      <div
        @click="cur == 1 ? (cur = -1) : (cur = 1)"
        :class="{ cur: cur == 1 }"
      >
        排序
        <i v-show="cur == 1" class="iconfont icon-shang"></i>
        <i v-show="cur != 1" class="iconfont icon-xia"></i>
      </div>
    </nav>
    <div class="Mask" @click.prevent="cur = -1" :class="{ cur: cur != 0 }">
      <div class="content" :class="{ cur: cur == 0 }" @click.stop>
        <div class="left">
          <div
            class="item"
            v-for="(cateItem, index) in categoryList"
            :key="index"
            @click="checkedLeftItem(index, cateItem)"
            :class="{ cur: cateItemCurindex == index }"
          >
            <p v-if="cateItem.name">
              <svg v-if="cateItem.svg" class="icon" aria-hidden="true">
                <use :xlink:href="`${cateItem.svg}`"></use>
              </svg>
              {{ cateItem.name }}
            </p>
            <p v-if="cateItem.count">{{ cateItem.count }}</p>
          </div>
        </div>
        <div class="right">
          <ul>
            <li
              v-for="(item, i) in rightItemList"
              :key="i"
              @click="changeList(i, item.title, 'random')"
              :class="{ cur: rightItemCurIndex == i }"
            >
              <span>{{ item.title }}</span>
              <span>{{ item.length }}</span>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <div class="Mask" @click.prevent="cur = -1" :class="{ cur: cur != 1 }">
      <div class="right-content" :class="{ cur: cur == 1 }">
        <div
          class="right-content-item"
          v-for="(item, index) in sortItems"
          :key="index"
          @click="checkedRightItem(item.state)"
        >
          <p>
            <svg class="icon" aria-hidden="true">
              <use :xlink:href="`${item.svg}`"></use>
            </svg>
          </p>

          <p>{{ item.data }}</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import "../../assets/js/iconfont";
export default {
  data() {
    return {
      cur: -1,
      cateItemCurindex: 1,
      categoryList: [
        {
          name: "异国料理",
          count: 4168,
          isUnchecked: true,
        },
        {
          name: "快餐便当",
          svg: "#icon-kuaicanbiandang",
          count: 3319,
          cateList: [
            {
              title: "简餐",
              length: 3045,
            },
            {
              title: "盖浇饭",
              length: 101,
            },
            {
              title: "米粉面馆",
              length: 76,
            },
            {
              title: "包子粥店",
              length: 33,
            },
            {
              title: "香锅砂锅",
              length: 20,
            },
            {
              title: "麻辣烫",
              length: 2,
            },
            {
              title: "包子馄饨",
              length: 2,
            },
            {
              title: "汉堡",
              length: 5,
            },
            {
              title: "生煎锅贴",
              length: 5,
            },
            {
              title: "黄焖鸡米饭",
              length: 11,
            },
            {
              title: "烧腊饭",
              length: 1,
            },
            {
              title: "煲仔饭",
              length: 2,
            },
            {
              title: "咖喱饭",
              length: 2,
            },
          ],
          isDefaultChecked: true,
        },
        {
          name: "小吃夜宵",
          svg: "#icon-yexiao",
          count: 269,
          cateList: [
            {
              title: "小龙虾",
              length: 45,
            },
            {
              title: "地方小吃",
              length: 70,
            },
            {
              title: "烧烤",
              length: 121,
            },
            {
              title: "炸鸡炸串",
              length: 18,
            },
            {
              title: "鸭脖卤味",
              length: 4,
            },
            {
              title: "零食",
              length: 3,
            },
          ],
        },
        {
          name: "果蔬生鲜",
          svg: "#icon-lingshi_guoshugan",
          count: 123,
          cateList: [
            {
              title: "水果",
              length: 31,
            },
            {
              title: "生鲜",
              length: 20,
            },
            {
              title: "蔬菜",
              length: 27,
            },
            {
              title: "海鲜水产",
              length: 36,
            },
          ],
        },
        {
          name: "特色菜系",
          svg: "#icon-tesexiaocai",
          count: 91,
          cateList: [
            {
              title: "川湘菜",
              length: 9,
            },
            {
              title: "其他菜系",
              length: 24,
            },
            {
              title: "江浙菜",
              length: 13,
            },
            {
              title: "粤菜",
              length: 17,
            },
            {
              title: "海鲜",
              length: 13,
            },
            {
              title: "火锅烤鱼",
              length: 3,
            },
            {
              title: "东北菜",
              length: 1,
            },
            {
              title: "西北菜",
              length: 2,
            },
            {
              title: "云南菜",
              length: 1,
            },
            {
              title: "新疆菜",
              length: 1,
            },
            {
              title: "鲁菜",
              length: 3,
            },
          ],
        },
        {
          name: "商店超市",
          svg: "#icon-chaoshi",
          count: 65,
          cateList: [
            {
              title: "超市",
              length: 26,
            },
            {
              title: "便利店",
              length: 14,
            },
            {
              title: "名酒坊",
              length: 7,
            },
            {
              title: "零食饮料",
              length: 5,
            },
            {
              title: "水站",
              length: 4,
            },
            {
              title: "茶",
              length: 2,
            },
            {
              title: "奶站",
              length: 0,
            },
            {
              title: "粮油",
              length: 1,
            },
            {
              title: "美妆母婴",
              length: 4,
            },
          ],
        },
        {
          name: "鲜花蛋糕",
          svg: "#icon-a-bianzu6beifen",
          count: 42,
          cateList: [
            {
              title: "鲜花",
              length: 20,
            },
            {
              title: "蛋糕",
              length: 11,
            },
            {
              title: "面包",
              length: 8,
            },
          ],
        },
        {
          name: "全部商家",
          svg: "#icon-quanbushangjia",
          count: "0",
          cateList: [],
        },
        {
          name: "甜品饮品",
          svg: "#icon-tianpin",
          count: 60,
          cateList: [
            {
              title: "奶茶果汁",
              length: 31,
            },
            {
              title: "甜品",
              length: 15,
            },
            {
              title: "咖啡",
              length: 11,
            },
          ],
        },
      ],
      rightItemList: [],
      rightItemCurIndex: -1,
      title: { value: "分类", index: this.rightItemCurIndex },
      sortItems: [
        {
          data: "智能排序",
          state: "defaultSort",
          svg: "#icon-cangpeitubiao_paixuzhandianpaixu",
        },
        {
          data: "月销量最高",
          state: "monthlySales",
          svg: "#icon-xiaoliangyuce",
        },
        {
          data: "价格最低",
          state: "priceMini",
          svg: "#icon-tab-jiagezuidi",
        },
        {
          data: "评分最高",
          state: "ratingHighest",
          svg: "#icon-pingfenzuigao",
        },
      ],
    };
  },
  components: {},

  computed: {},

  methods: {
    checkedLeftItem(index, cateItem) {
      if (!cateItem.isUnchecked) {
        this.cateItemCurindex = index;
        this.rightItemList = cateItem.cateList;

        let rightCheckedItem = cateItem.cateList[this.title.index];
        if (rightCheckedItem) {
          if (this.title.value != rightCheckedItem.title) {
            this.rightItemCurIndex = -1;
          } else {
            this.rightItemCurIndex = this.title.index;
          }
        }
      }
    },
    changeList(curindex, title, state = "random") {
      /* @param state = random:0 ||
      智能排序> defaultSort:1 ||
      月销量最高排序> monthlySales:2 ||
      配送价格最低 > priceMini:3 ||
      评分最高> ratingHighest:4
      */
      this.rightItemCurIndex = curindex;
      this.title.value = title;
      this.title.index = this.rightItemCurIndex;
      this.cur = -1;
      let o = {
        random: 0,
        defaultSort: 0,
        monthlySales: 0,
        priceMini: 0,
        ratingHighest: 0,
      };

      this.$emit("state", state);
    },
    checkedRightItem(state) {
      this.$emit("state", state);
    },
  },
  mounted() {
    this.rightItemList = this.categoryList[1].cateList;
  },
};
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>

.icon
  width: 20px;
  height: 20px;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;


div
    padding: 5px 0;
    div
        nav
            height: 40px
            display: flex;
            align-items: center;
            text-align: center;
            justify-content: space-between
            background-color: #fff;
            z-index: 200;
            border-bottom: 1px solid #959191
            div
                width: 50%
                height: 50%
                font-size:18px;
                &.cur
                    color: #009375
            div:first-of-type
                position: relative
            div:first-of-type::after
                content: "";
                display: block;
                width: 0.02667rem;
                background-color: #959191;
                height: 0.53333rem;
                position: absolute;
                right: 0;
                top: 10px;
            i
              font-size:14px;
    .Mask
        position: fixed;
        width: 100%;
        height: 100%;
        z-index: 10;
        padding: 0;
        background-color: rgba(0,0,0,.3);
        margin-top: -2px;
        &.cur
            height: 0;


        .content
            transition: .3s;
            background-color: #fff;
            display: flex;
            padding: 0;
            height: 0rem;
            color: #666;
            border-radius: 0 0 10px 10px;
            overflow: hidden;
            .left,
            .right
                width: 50%;
                height: 100%;
                padding: 0;
                overflow-y: auto
            .left
                background-color rgb(241, 241, 241)
                .item
                  padding:10px;
                  display: flex;
                  justify-content: space-between
                  align-items: center;
                  img
                    width: 20px;
                    height: 20px;
                  p
                    margin: 0;
                    font-size:14px
                  p:last-of-type
                    background: #ccc;
                    padding: 5px;
                    border-radius: 25px;
                    color:#fff
                    font-size: 12px;
                  &.cur
                    background-color:#fff;

            .right
                width: 50%;
                ul
                  list-style: none;
                  font-size: 15px;
                  padding: 0px 20px;
                  margin: 0;
                  li
                    display: flex;
                    justify-content: space-between
                    align-items: center;
                    padding: 15px 0;
                    &.cur
                      color:#009375;
                  li+li
                    border-top: 1px solid #f5f5f5

            &.cur
                height: 7.6rem;
.Mask
  .icon
    width: 20px;
    height:20px;
  .right-content
    transition: .3s;
    background-color: #fff;
    height: 0rem;
    color: #666;
    border-radius: 0 0 10px 10px;
    overflow: hidden;
    font-size: 16px;
    &.cur
      height: 7.6rem;
    .right-content-item
      display: flex;
      align-items: center;
      p
        padding:10px 0;
        margin:0;
      > p:first-of-type
        margin: 0 10px 0 20px;
      > p:last-of-type
        border-bottom: 1px solid #f5f5f5
        width:100%;
</style>
<style scoped></style>
